<!--
 * @Description: 签约管理
 * @Author: 龙春雨
 * @Date: 2023-04-11 10:15:19
-->
<template>
  <basic-container>
    <avue-crud
      ref="crud"
      v-model="form"
      :data="tableData"
      :page.sync="page"
      :table-loading="tableLoading"
      :option="tableOption"
      @on-load="getList"
      @search-change="searchChange"
      @search-reset="searchReset"
      @row-del="handleDelete"
    >
      <template slot="menuLeft">
        <el-button
          type="primary"
          size="small"
          @click="handleAdd"
        >
          发起领养协议
        </el-button>
        <el-button
          type="primary"
          size="small"
          @click="agree"
        >
          发起送养协议
        </el-button>
      </template>
      <template #menu="{ row }">
        <div>
          <el-button
            type="text"
            size="default"
            @click="handleCheck(row)"
          >
            查看
          </el-button>
          <el-button
            v-if="row.status === '0'"
            type="text"
            size="default"
            @click="handleDelete(row)"
          >
            作废
          </el-button>
          <el-button
            v-if="row.status === CONTRACT_STATUS.COMPLETED"
            type="text"
            size="default"
            @click="handleFile(row)"
          >
            协议文件
          </el-button>
        </div>
      </template>
    </avue-crud>
    <add-dialog
      :visible.sync="dialogVisible"
      :agreement-detail="agreementDetail"
      :agree-list="agreeList"
      @refreshList="getList"
    ></add-dialog>
    <agree-dialog
      :visible.sync="agreeVisible"
      @refreshList="getList"
    ></agree-dialog>
    <review-dialog
      :visible.sync="reviewVisible"
      :review-obj="reviewObj"
    ></review-dialog>
  </basic-container>
</template>

<script>
import { tableOption } from '@/const/crud/pet/contractMng';
import { cancelObj, fetchPage, selectDetailById } from '@/api/core/agreement';
import crudMixins from '@/mixins/crud';
import addDialog from './components/addDialog.vue';
import agreeDialog from './components/agreeDialog.vue';
import reviewDialog from './components/reviewDialog.vue';
import { CONTRACT_STATUS, RESERVE_AGGREE } from '@/const/type';
export default {
  name: 'ContractMng',
  components: {
    addDialog,
    agreeDialog,
    reviewDialog,
  },
  mixins: [crudMixins],
  data() {
    return {
      tableOption,
      form: {},
      agreeList: [],
      dialogVisible: false,
      agreeVisible: false,
      agreementDetail: {},
      CONTRACT_STATUS,
      RESERVE_AGGREE,
      reviewVisible: false,
      reviewObj: {},
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler(val) {
        if (val && val.query.isOpen) {
          this.agreeVisible = true;
        }
      },
    },
  },
  methods: {
    // 获取列表
    async getList() {
      this.tableLoading = true;
      const timeObj = {};
      if (this.searchForm.signDate && this.searchForm.signDate.length) {
        timeObj.signStartDate = this.searchForm.signDate[0];
        timeObj.signEndDate = this.searchForm.signDate[1];
        // delete this.searchForm.signDate;
      }
      fetchPage(
        Object.assign(
          {
            current: this.page.currentPage,
            size: this.page.pageSize,
            petCode: this.searchForm.petCodes,
            petName: this.searchForm.petNames,
          },
          this.searchForm,
          timeObj
        )
      )
        .then((response) => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    //送养协议
    agree() {
      this.agreeVisible = true;
    },
    //领养
    handleAdd() {
      this.agreementDetail = {
        formType: 'add',
      };
      this.dialogVisible = true;
    },
    // 删除
    handleDelete: function (row, index) {
      this.$confirm('是否确认作废该签约!', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return cancelObj(row.id);
        })
        .then(() => {
          this.$message.success('作废成功');
          this.getList();
        });
    },
    // 查看
    handleCheck(row) {
      if (row.type === RESERVE_AGGREE.ADOPT) {
        selectDetailById(row.id).then(({ data }) => {
          this.agreementDetail = {
            formType: 'check',
            detail: data.data,
          };
          data.data.petInfoList.map((item) => {
            this.agreementDetail.detail.petCode = item.petCode;
            this.agreementDetail.detail.petName = item.petName;
            this.agreementDetail.detail.petSex = item.petGender;
            this.agreementDetail.detail.petTypeName = item.varietyName;
            this.agreementDetail.detail.baseName = item.baseName;
            this.agreementDetail.detail.baseAddress = item.baseAddress;
          });
          // this.agreementDetail.detail.petTypeName = `${data.data.typeName}｜${data.data.varietyName}`;
          this.dialogVisible = true;
        });
      } else {
        selectDetailById(row.id).then((res) => {
          this.reviewObj = res.data.data;
          console.log('review', this.reviewObj);
        });
        this.reviewVisible = true;
      }
    },
    handleFile(row) {
      window.open(row.url, '_blank');
    },
  },
};
</script>

<style lang="scss">
.dialog-classify {
  .el-collapse-item__header {
    margin-bottom: 0;
  }
  .avue-upload {
    position: absolute;
    width: 100%;
  }
}
</style>
